// ignore_for_file: file_names, slash_for_doc_comments, must_call_super, unnecessary_overrides, override_on_non_overriding_member, must_be_immutable, prefer_const_constructors, sized_box_for_whitespace, avoid_unnecessary_containers, avoid_print

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mybase/base/abstract/IFFR.dart';
import 'package:mybase/base/abstract/IFFRefresh.dart';
import 'package:mybase/base/abstract/IFFScaffold.dart';
import 'package:mybase/base/widget/layout/FFLineContainer.dart';
import 'package:mybase/base/widget/layout/FFTextButton.dart';
import 'package:mybase/base/widget/page/FFScaffold.dart';
import 'package:mybase/base/tool/extension/FFListExt.dart';
import 'package:mybase/base/widget/layout/FFNavi.dart';
import 'package:mybase/base/tool/arouter/FFGoto.dart';
import 'package:responsive_builder/responsive_builder.dart';

class ResponsePage extends FFScaffold {
  String? name;

  ResponsePage({
    Key? key,
    this.name,
  }) : super(key: key);

  @override
  ResponsePageState createState() => ResponsePageState();
}

class ResponsePageState extends FFScaffoldState with MFFScaffold {
  /**固定写法 */
  @override
  IFFScaffold get iffScaffold => this;

  @override
  ResponsePage get widget => super.widget as ResponsePage;

  @override
  IFFRefresh? get iffRefresh => refresh;
  late ResponsePageRefresh refresh = ResponsePageRefresh(state: this);

  /**固定写法end */

  @override
  void ffInitState() {
    iffScaffold.ffPageStatus = FFPageStatus.result;
    super.ffInitState();
  }

  @override
  Widget? ffNavi(BuildContext context) {
    return FFNaviFast.navi(context, "响应式测试", color: Colors.white);
  }

  /**
      <-    desktop     <-    tablet     <-    watch     <-
      桌面              平板              手机            手表

      像素宽度 x
      x < watch 是 手表(watch)
      x >= watch && x <= tablet 是 手机(mobile)
      x > tablet && x <= desktop 是 中等(tablet平板)
      x > desktop 是 桌面（大屏幕）
   */

  @override
  Widget? ffBody(BuildContext context) {
    // return test4();
    // return test3();
    return test2();
    // return test1();
  }

  //响应大小，百分比,不靠谱
  Widget test4() {
    return FFLineContainer(
      direction: Axis.horizontal,
      width: MediaQuery.of(context).size.width,
      children: [
        Container(
          height: 50,
          width: 50.screenWidth,
          color: Colors.yellow,
        ),
        Container(
          height: 50,
          width: 50.screenWidth,
          color: Colors.pink,
        )
      ],
    );
  }

  //为不同的尺寸取不同的值
  Widget test3() {
    var screenType = getDeviceType(MediaQuery.of(context).size);
    print(screenType);
    return Container(
      padding: EdgeInsets.all(getValueForScreenType<double>(
        context: context,
        mobile: 10,
        tablet: 30,
        desktop: 60,
        watch: 1,
      )),
      color: Colors.yellow,
      child: Text('Best Responsive Package'),
    );

    /*
    //屏幕类型
    var screenType = getDeviceType(MediaQuery.of(context).size);

    //在指定屏幕类型上返回bool值
    getValueForScreenType<bool>(
      context: context,
      mobile: false,
      tablet: true,
    )
    //这将在平板设备上返回 true，在移动设备上返回 false
    */
  }

  //如果您不想一次构建所有小部件，则可以使用小部件构建器
  //可以自定义屏幕大小
  Widget test2() {
    return ScreenTypeLayout.builder(
      // breakpoints: ScreenBreakpoints(desktop: 800, tablet: 700, watch: 600),
      watch: (ctx) {
        return Container(color: Colors.yellow);
      },
      mobile: (ctx) {
        return Container(
          color: Colors.white,
          child: Center(
            child: FFTextButton(
              unconstrainedBox: true,
              text: "123",
              fontSize: 12.sp,
              width: 100.w,
              heigth: 100.w,
              color: Colors.pink,
              alignment: Alignment.center,
            ),
          ),
        );
      },
      tablet: (ctx) {
        return Container(color: Colors.green);
      },
      desktop: (ctx) {
        return Container(color: Colors.red);
      },
    );
  }

  Widget test1() {
    return ResponsiveBuilder(
      builder: (ctx, info) {
        if (info.deviceScreenType == DeviceScreenType.desktop) {
          return Container(color: Colors.red);
        }

        if (info.deviceScreenType == DeviceScreenType.tablet) {
          return Container(color: Colors.green);
        }

        if (info.deviceScreenType == DeviceScreenType.mobile) {
          return OrientationLayoutBuilder(
            mode: OrientationLayoutBuilderMode.auto,
            portrait: (context) => Container(color: Colors.white),
            landscape: (context) => Container(color: Colors.blue),
          );
          return Container(color: Colors.white);
        }

        if (info.deviceScreenType == DeviceScreenType.watch) {
          return Container(color: Colors.yellow);
        }

        return Container(color: Colors.black);
      },
    );
  }

  @override
  Widget? ffloatingActionButton(BuildContext ctx) {
    return FFTextButton(
      text: "下一个页面",
      width: 100,
      heigth: 100,
      color: Colors.red,
      fontSize: 14,
      onClick: () {
      },
    );
  }

  @override
  Widget? ffBodyWeb(BuildContext context) {
    return Container(
      color: Colors.pink,
    );
  }
}

class ResponsePageRefresh with MFFRefresh {
  ResponsePageState state;

  ResponsePageRefresh({required this.state});

  @override
  bool? ffCanRefreshHead() {
    return true;
  }

  @override
  bool? ffCanRefreshFoot() {
    return true;
  }

  @override
  ffRefresh(bool isHead) {
    ffRefreshResult(isHead, test, state);
  }

  //具体请求业务
  Future<IFFR> test(IRefreshParam? iRefreshParam) async {
    print("请求api");
    List? list;
    await Future.wait([
      //HomeApi.index_recentlyPlayed(),
    ]).then((value) {
      list = value;
    });

    await Future.delayed(Duration(seconds: 1));

    IFFR? r = list?.safeValue(0);
    return r ?? R(rStatus: RStatus.result);
  }
}
